<script>
import { getDepartmentListAPI } from '@/api/departmentApi'
import { transToTreeData } from '@/utils'

export default {
  name: 'Cascader',
  props: {
    /* 父组件传递过来的value */
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      /* 树形结构的数据源 */
      options: [],
      /* 数据源中的字段 */
      defaultProps: { value: 'id', label: 'name', children: 'children' }
    }
  },
  methods: {
    /* 获取部门列表的请求函数 */
    async fetchDepartment() {
      try {
        // 调用getDepartmentListAPI()获取部门列表的接口(返回的是一个Promise对象)
        const { data } = await getDepartmentListAPI()
        // 保存转换后的树形部门列表数组(树形的结构)
        this.options = transToTreeData(data, 0)
      } catch (e) {
        // 部门列表获取失败
        this.$message.error(e.message)
      }
    },
    /* 当选中节点变化时的回调函数 */
    handleChange(departmentIds) {
      const id = departmentIds[departmentIds.length - 1]
      this.$emit('input', id)
    }
  },
  mounted() {
    this.fetchDepartment()
  }
}
</script>

<template>
  <el-cascader :value="value" :options="options" @change="handleChange" :props="defaultProps" separator="-"></el-cascader>
</template>
